<template>
  <view :style="[styles]">
    <u-image
      :lazy-load="true"
      :src="attribute.src"
      width="100%"
      :height="styles.height"
      v-if="attribute.src"
      :mode="attribute.cutMode"
      @click="handleImgClick"
    />
    <view class="empty-area" v-else>
      <u--text align="center" text="宽度为100%,不限高度" color="#d1d1d2"></u--text>
    </view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo/index";

export default {
  name: `${COMPREIFX}image`,
  props: {
    attribute: Object,
    styles: Object
  },
  data() {
    return {};
  },
  methods: {
    handleImgClick() {
      if (this.attribute.navigateType) {
        callNavigateHook({
          type: this.attribute.navigateType,
          target: this.attribute
        });
      } else {
        this.$emit("event", {
          eventName: "imgClick",
          attribute: this.attribute
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-area {
  width: 100%;
  height: 275rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7f9d3;
}
</style>
